<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: #ADFF2F;
			}
			#box1 span {
				background-color: #FFA500;
			}
		</style>
	</head>
	<div id="box1">
		你好呀
		<span id="s1">我是谢应鹏</span>
	</div>
	<ul id="u1">
		<li><a href="javascript:;" class="clink">超链接1</a></li>
		<li><a href="javascript:;" class="clink">超链接2</a></li>
		<li><a href="javascript:;" class="clink">超链接3</a></li>
	</ul>
	<button type="button" id="btn">添加超链接</button>
	<script type="text/javascript">
		window.onload = function(){
			var s1 = document.getElementById("s1");
			var box1 = document.getElementById("box1");
			var btn = document.getElementById("btn");
			var ul = document.getElementById("u1");
			/* 
				事件的冒泡
				所谓的事件冒泡 就是事件向上传导   当后代的事件被触发时
				它的祖先元素也会被触发
			 
			 */
			s1.onclick = function(){
				alert("s1事件");
				
			}
			box1.onclick = function(){ 
				alert("box1事件");
			}
			/* document.body.onclick = function(){
				alert("body事件");
			} */
			btn.onclick = function(){
				var li = document.createElement("li");
				li.innerHTML = "<a href='#' class='clink'>新建的超链接</a>";
				ul.appendChild(li);
				
			}
			u1.onclick = function(event){/* 事件的委派 */
				/* event中的target表示触发事件的对象 */
				eveent = event || window.event;
				if(event.target.className == "link"){
					alert("nh");
				}
				
			}
			/* 
				addEventListener()事件可以对同一个id绑定多个事件
				1.事件的字符串不需要on
				2.
				在IE8及以下的版本不支持addEventListener()
				但是可以使用attachEvent()
				1.事件的字符串需要on
				2.回调函数
				3.执行顺序是先执行后绑定 与addEventListener()相反
			 
			 */
		};
	</script>
	<body>
	</body>
</html>
